<template>
  <div class="lf1" ref="wrap">
    <!-- -->
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted ,ref} from 'vue'

let color=['#36Dc88','#00a4ff','#9062ec','yellow','red']
let echartData = [{
        name: "返回未就业48.64",
        value: "10220"
    },
    {
        name: "以往就业48.64",
        value: "6020"
    },
    {
        name: "已就业48.64",
        value: "2200"
    },
    {
        name: "未就业27.25",
        value: "2420"
    },
    {
        name: "以前未就业48.64",
        value: "2400"
    },
  
];
let option =ref( {
   
    color: color,
    tooltip: {
        trigger: 'item'
    },
    title: [{
       
        top: 'center',
        left: 'center',
        textStyle: {
            rich: {
                name: {
                    fontSize: 12,
                    fontWeight: 'normal',
                    color: '#fff',
                    padding: [10, 0]
                },
                val: {
                    fontSize: 12,
                    fontWeight: 'bolder',
                    color: '#fff',
                }
            }
        }
    },{
        text: '单位：个',
        top: 20,
        left: 20,
        textStyle: {
            fontSize: 14,
            color:'#666666',
            fontWeight: 400
        },
        show: false
    }],
    series: [{
        type: 'pie',
        roseType: 'radius',
        radius: ['25%', '60%'],
        center: ['50%', '50%'],
        data: echartData,
        hoverAnimation: false,
        itemStyle: {
            normal: {
            
                borderWidth: 2
            }
        },
        labelLine: {
            normal: {
                length: 20,
                length2: 20,
                lineStyle: {
                    // color: '#e6e6e6'
                }
            }
        },
        label: {
            normal: {
              
                // padding: [0 , -100, 25, -100],
                rich: {
                    icon: {
                        fontSize: 16,
                        color: 'inherit'
                    },
                    name: {
                        fontSize: 18,
                        padding: [0, 0, 0, 10],
                        color: '#fff'
                    },
                    value: {
                        fontSize: 14,
                        fontWeight: 'bolder',
                        padding: [10, 0, 0, 20],
                        color: 'inherit'
                        // color: '#333333'
                    }
                }
            }
        },
    }]
});

let wrap = ref('')

onMounted(()=>{
    var myChart = echarts.init(wrap.value);
    myChart.setOption(option.value);

    window.addEventListener('resize',function(){
        myChart.resize()
    })
})


</script>

<style>
.lf1{
    width: 100%;
    height: 90%;
}
</style>